<template>
  <div>
    <el-table
      :data="tableData"
      :size="tableSize"
      :height="tableHeight"
      highlight-current-row
    >
      <!-- <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in scope.row.process"
                  :key="index"
                  :timestamp="activity.operationTime+'  '+activity.operationUserName">
                  {{activity.describe}}
                </el-timeline-item>
              </el-timeline>
            </el-col>
            <el-col :span="5">
              <start-pop ref="StartPop" :row="scope.row"/>
            </el-col>
          </el-row>
        </template>
      </el-table-column> -->
      <el-table-column type="index" width="40" />
      <el-table-column width="80px" label="开发进度">
        <template slot-scope="scope">
          <el-tag :type="statusType(scope.row.status)" @click="showView(scope.row)">{{ statusTypeName(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="40"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="showPOP(scope.row)">
            {{ scope.row.flag===true?'&lt;&lt;':'&gt;&gt;' }}
          </el-button>
          <el-popover
            :id="scope.row.taskId"
            :key="scope.row.taskId"
            :ref="scope.row.taskId"
            :class="myPop"
            :popper-class="popClass"
            placement="right-start"
            trigger="click"
            :visible-arrow="false"
          >
            <process :key="scope.row.taskId+1000" :ref="scope.row.taskId+1000" :row="scope.row" />
          </el-popover>
        </template>
      </el-table-column>
<!--      <el-table-column prop="taskCode" label="编号" width="110px" />-->
      <el-table-column prop="projectName" label="项目" width="100px" />
      <el-table-column prop="lv1ModuleName" label="模块" width="100px" />
      <el-table-column prop="lv2ModuleName" label="子模块" width="120px" />
      <el-table-column prop="devPersonName" label="开发负责人" width="100px" />
      <el-table-column prop="decomposition" :show-overflow-tooltip="true" label="任务分解" width="250px" />
      <el-table-column prop="describe" :show-overflow-tooltip="true" label="任务详细描述" width="250px" />
      <el-table-column prop="completeVersionName" label="计划完成版本" width="120px" />
      <el-table-column prop="commission" label="计划投产时间" width="140px" />
      <el-table-column prop="devBegin" label="计划开发开始时间" width="140px" />
      <el-table-column prop="devEnd" label="计划开发结束时间" width="140px" />
      <el-table-column prop="realBegin" label="调整后开始时间" width="120px" />
      <el-table-column prop="realEnd" label="调整后结束时间" width="120px" />
      <el-table-column prop="testPersonName" label="测试负责人" width="120px" />
      <el-table-column prop="self" label="自测情况" width="120px" />
      <el-table-column prop="remarks" label="备注" width="250px" />
      <el-table-column label="操作" width="150" fixed="right" >
        <template slot-scope="scope" >
          <el-button type="text" size="small" @click="showView(scope.row)" icon="el-icon-view">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)" v-if="showEdit" >编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)" v-if="showDelete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        style="margin-top: 10px"
        :current-page="page.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next"
        background
        :total="page.totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { remove } from '@/api/task'
//  import StartPop from './projectStartPop'
import process from './process'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'window_height'
    ])
  },
  props: ['role'],
  components: {
    // StartPop
    process
  },
  data() {
    return {
      showEdit: false,
      showDelete: false,
      myPop: 'myPop2',
      popClass: 'popClass2',
      tableSize: 'small',
      tableHeight: 520,
      height: `${document.documentElement.clientHeight}`,
      loading: false,
      showTran: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        totalNum: 0,
        totalPage: 0
      },
      tableData: []
    }
  },
  created() {
    this.tableHeight = this.window_height - 107
    // this.height > 900 ? this.tableHeight = 830 : 520
    this.height > 900 ? this.tableSize = 'medium' : 'small'
    this.height > 900 ? this.myPop = 'myPop1' : 'myPop2'
    this.height > 900 ? this.popClass = 'popClass1' : 'popClass2'
    this.showEdit = this.role === 'admin' || this.role === 'manager' || this.role === 'analyst'
    this.showDelete = this.role === 'admin' || this.role === 'manager' || this.role === 'analyst'
  },
  methods: {
    showView(row) {
      this.$parent.$refs.search.$refs.pop.readOnly(row)
    },
    showPOP(row) {
      // 所有都隐藏
      this.tableData.forEach(e => {
        document.getElementById(e.taskId).children[0].style = 'display: none'
      })
      // 完成的就不切换了
      if (row.status === 2 || row.status === 4 || row.status === 5 || row.status === 6) {
        return
      }
      const flag = !row.flag
      if (flag) {
        document.getElementById(row.taskId).children[0].style = 'width: 370px; margin-left: 30px'
      } else {
        document.getElementById(row.taskId).children[0].style = 'display: none'
      }
      this.tableData.forEach(e => {
        e.flag = false
      })
      row.flag = flag
      this.$refs[row.taskId + 1000].tranShow()
    },
    changeStatus(taskId, process, status) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].taskId === taskId) {
          this.tableData[i].status = status
          this.tableData[i].process = process
        }
      }
    },
    statusType(type) {
      switch (type) {
        case 0:
          return 'info'
        case 1:
          return 'warning'
        case 2:
          return 'success'
        case 3:
          return 'danger'
        case 4:
          return 'info'
        case 5:
          return 'primary'
        case 6:
          return 'info'
      }
    },
    statusTypeName(type) {
      switch (type) {
        case 0:
          return '未启动'
        case 1:
          return '开发中'
        case 2:
          return '已完成'
        case 3:
          return '被堵塞'
        case 4:
          return '关闭'
        case 5:
          return '测试中'
        case 6:
          return '已提交'
      }
    },
    getTableData(data) {
      this.tableData = data.content
      this.page.totalNum = data.totalNum
      this.page.totalPage = data.totalPage
      this.tableData.forEach(e => {
        e.flag = false
      })
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.$parent.$refs.search.handleClickSerach()
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.$parent.$refs.search.handleClickSerach()
    },
    handleEdit(row) {
      this.$parent.$refs.search.$refs.pop.editShowView(row)
    },
    handleDelete(row) {
      this.$confirm('是否删除此条任务数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.taskId).then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.$parent.$refs.search.handleClickSerach()
        })
      })
    }
  }
}
</script>

<style>
  .el-table__body tr:hover>td {
    background-color: #ffffff !important;
  }
  .el-table__body tr.current-row>td {
    background-color: #F5F7FA !important;
  }
</style>

<style>
  .myPop1>.el-popover.popClass1 {
    padding-top: 13px !important;
    padding-bottom: 12px !important;
    padding-left: 2px !important;
    border: 0 !important;
    background: #F5F7FA !important;
    -webkit-box-shadow: none !important;
    box-shadow: none;
    float: right;
    margin-top: -40px;
    margin-left: 20px;
  }
  .myPop2>.el-popover.popClass2 {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
    padding-left: 2px !important;
    border: 0 !important;
    background: #F5F7FA !important;
    -webkit-box-shadow: none !important;
    box-shadow: none;
    float: right;
    margin-top: -40px;
    margin-left: 20px;
  }
</style>
